<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="keywords" content="生鲜,天天,极速">
		<link rel="shortcut icon" href="images/logo.png">
		<title>天天生鲜-登录</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/login.css" />
	</head>
	<body>
		<!--emment-->
		<div class="logo_top">
			<a href="#" class="login_logo"><img src="images/logo02.png"></a>
		</div>
		<div class="login_form_bg">
			<div class="login_form_wrap">
				<div class="login_banner fl">
					<img src="images/login_banner.png">
				</div>
				<div class="slogn fl">
					日夜兼程 · 极速送达
				</div>
				<div class="login_form fr">
					<div class="login_title clearfix">
						<h1 class="fl">用户登录</h1>
						<a href="register.html" class="fr">立即注册</a>
					</div>
					<!-- 登陆表单-->
					<div class="form_input">
						<form>
							<ul>
								<li>
									<input type="text" placeholder="请输入您的用户名" name="nickname" class="name_input" id="nickname"/>
								</li>
								<li>
									<input type="password" placeholder="请输入您的密码" name="pwd" class="pwd_input" id="pwd"/>
								</li>
								<li>
									<input type="text" placeholder="请输入您的验证码" name="yzm" class="yzm_input" id="yzm"/>
									<img src="getcode" class="code" onclick="refreshCode(this)" title="点击刷新">
								</li>
								<li>
									<div class="more_input">
										<input type="checkbox" />
										<label>记住用户名</label>
										<a href="#">忘记密码</a>
									</div>
								</li>
								<li>
									<input type="button" value="登录" class="submit_input" id="login_btn"/>
								</li>
								<li id="msg"></li>
							</ul>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="foot_link">
				<a href="#">关于我们</a><span> | </span>
				<a href="#">联系我们</a><span> | </span>
				<a href="#">招聘广告</a><span> | </span>
				<a href="#">友情链接</a>
			</div>
			<p>Copyright &copy; 2021 衡阳市源辰信息科技有限公司 All Rights Reserverd</p>
			<p>电话：0734-8355998 湘ICP备16015987号</p>
		</div>
		<!-- 引入JQuery -->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			function refreshCode(obj){
				obj.src = "getcode?" + Math.random();
			}
			let arr = [false,false];//验证通过的标记
			// 昵称失去焦点事件 箭头函数 () =>
			$("#nickname").blur(function(){
				// 获取用户输入的昵称 trim头尾去空格
				let nickname = $.trim($(this).val());
				console.log(nickname);
				// 容错判断  无数据
				if(nickname == null || nickname == ""){
					$("#msg").html("昵称不能为空").css("color","red");
					return;
				}
				arr[0] = true;
				// 有数据
				// 数据有效性  正则表达式 定义规则
				let reg = /^[\u4e00-\u9fa5\w]{2,4}$/; //汉字组成
				// 判断
				let flag = reg.test(nickname);
				if(flag){
					arr[0] = true;
					$("#msg").html("");
				}else{
					arr[0] = false;
					$("#msg").html("你输入的昵称不符合规范").css("color","red");
				} 
				
				}
			);
			
			// 模拟登录操作 includes
			$("#login_btn").click(()=>{
				//密码校验
				arr[1] = true;
				
				//验证判断  标记数组中是否包含 false
				if(arr.includes(false)){
					alert("您输入的信息不规范！！!!!!");
					return;
				}
				// 获取登录信息
				let nickname = $.trim($("#nickname").val());
				let pwd = $.trim($("#pwd").val());
				let code = $.trim($("#yzm").val());
				
				// 发送请求包含登录信息到后台服务器进行登录操作
				// ajax Asynchronous javascript  and XML (异步的Javascript 和 XML)
				$.post("member/login",{nickName: nickName,pwd: pwd, realName: code},(data)=>{
					// 判断回调函数的响应值
					if(data.code == 501){
						alert("验证码错误...");
						return;
					}
					if(data.code == 200){
						// 页面跳转到主界面
						location.href = "index.html";
						return;
					}
					alert("登陆失败，您的账号或密码不正确！！！");
				},'json');
			});
		</script>
	</body>
</html>
